<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>resume</title>
		<link rel="stylesheet" type="text/css" href="./bootstrap/css/bootstrap.min.css"/>
		<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/echarts.js"></script>
		<script src="bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		
		<style type="text/css">
			body{
				/* 添加背景 */
				background: url(img/12.jpg) no-repeat;
				background-size: 100% 100%;

			}
			/* header */
			header div{padding-top: 30px;}
			/* card */
			.card-box{

			}

			.card{
				margin-top: 0px;
				text-align: center;
				background-color: #2AABD2;
				padding: 0 !important;
				padding-top: 30px !important;
				position: fixed;
				width: 290px;
			}
			.card img{
				width: 100px;
				height: 100px;
				border-radius: 50%;
				
			}
			.home,.email,.qq,.github{
				display: block;
				width: 53px;
				height: 53px;
			}
			.home{background: url(img/c01.png) no-repeat center;}
			.email{background: url(img/c02.png) no-repeat center;}
			.qq{background: url(img/c03.png) no-repeat center;}
			.github{background: url(img/c05.png) no-repeat center;}
			.bottom-card{
				height: 145px;
				width: 100%;
				background-color: #3E8F3E;
			}
			.download{margin-top: 40px;}
			/* main */
			.main{
				background-color: #fff;
				margin: -20px;
				margin-left: 20px;
			}
			.dl-horizontal{padding-left: 5%;}
			.dl-horizontal dd{margin: 15px;}
			.dl-horizontal dt{text-align: left !important;}

			.title{padding: 30px 20px 0px 30px;}
			#education{
				/* margin-left: 20px; */
			}
			#education .school{
				margin-left: 45px;
				width: 800px;
			}
			#education .school div{
				display: block;
				padding: 10px 0px 0px 75px;
			}
			#education .school p{
				margin-bottom: 0px;
			}
			#experience p{
				/* margin: 0px; */
				padding-left: 50px;
				padding-right: 50px;
			}
			#project .row{box-sizing: border-box;}
			#project img{border: white solid 1px;}
			#project .row div{padding: 0px !important;}
			
			.descript{
				position: absolute;
				opacity: 0;
				top: 2px;
				left: 0px;
				width: 100%;
				height: 50%;
				background-color: rgba(42,42,42,0.9);
				overflow: hidden;
				transition: all 0.3s ease-in-out;
			}
			.descript02{top: 50%;}
			.descript03{height: 100%;}
			.descript h2{color: white;}
			.descript p{color: white;}
			.personal:hover .descript{opacity: 1;}
			.details{color: #000000;width: 60px;}
			.descript01 .center,.descript02 .center{margin-top: 15%;}
			.descript03 .center{margin-top: 50%;}
			/* nav */
			.nav{
				background-color: white;
				position: fixed;
				padding: 10px;
			}
			.nav li{margin-top: 20px;}
			.logo{font-size: 40px; color: #2AABD2;
			}
			
			@media screen and (max-width: 992px) { 
				header div{
					padding-top: 0px !important;
				}
				.main{margin: -15px;}
				.col-xs-offset{margin-left: 8%;}
				.card{
					position: relative;
					margin: -15px;
					width: 100%;
				}
				.card-box{margin: -15px; padding: 0 !important;}
			}
		</style>
	</head>
	<body>
		<div class="container-fluid" style="height: 100%;">
			<!-- 占位 -->
			<header>
				<div></div>
			</header>
			<div class="row">
				<!-- 左边的框 -->
				<div class="card-box col-md-3">
					<div class="card col-md-3" >
						<div class="top-card">
							<img src="img/person.jpg" >
							<h1>陈有根</h1>
							<p>丽水 | 前端开发师</p>
							<ul class="list-unstyled list-inline">
								<li><a href="" class="home"></a></li>
								<li><a href="" class="email"></a></li>
								<li><a href="" class="qq"></a></li>
								<li><a href="" class="github"></a></li>
							</ul>
						</div>
						<div class="bottom-card">
							<div class="download btn btn-info btn-lg" onclick="window.print()">
								DOWNLOAD RESUME
							</div>
						</div>
					</div>
				</div>
				
				<div class="col-md-8">
					<!-- 主体部分 -->
					<div class="main">
						
						<div id="basic-info">
							<h2 class="lead title">基本信息</h2>
							<dl class="dl-horizontal">
							    <dt>性别</dt>
							    <dd>男</dd>
							    <dt>出生日期</dt>
							    <dd>19 6 2000</dd>
								<dt>手机</dt>
								<dd>188xxxxx</dd>
								<dt>E-MAIL</dt>
								<dd>xxx@xx.com</dd>
							</dl>
						</div>
						<hr >
						<div id="profetional">
							<h2 class="lead title">职业技能</h2>
							<div class="row">
								<div class="col-md-5 col-md-offset-1 col-sm-5 col-sm-offset-1 col-xs-10 col-xs-offset-1">
									<div>
										<strong>Java</strong>
										<div class="progress">
										    <div class="progress-bar" role="progressbar" aria-valuenow="60" 
										        aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
										        <span class="sr-only">40% 完成</span>
										    </div>
										</div>
									</div>
									<div>
										<strong>HTML</strong>
										<div class="progress">
										    <div class="progress-bar" role="progressbar" aria-valuenow="60" 
										        aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
										        <span class="sr-only">40% 完成</span>
										    </div>
										</div>
									</div>
									<div>
										<strong>CSS</strong>
										<div class="progress">
										    <div class="progress-bar" role="progressbar" aria-valuenow="60" 
										        aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
										        <span class="sr-only">40% 完成</span>
										    </div>
										</div>
									</div>
									<div>
										<strong>JavaScript</strong>
										<div class="progress">
										    <div class="progress-bar" role="progressbar" aria-valuenow="60" 
										        aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
										        <span class="sr-only">40% 完成</span>
										    </div>
										</div>
									</div>
								</div>
								<div class="col-md-5 col-sm-5 col-xs-10 col-xs-offset">
									<div>
										<strong>MyBatis</strong>
										<div class="progress">
										    <div class="progress-bar" role="progressbar" aria-valuenow="60" 
										        aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
										        <span class="sr-only">40% 完成</span>
										    </div>
										</div>
									</div>
									<div>
										<strong>Spring</strong>
										<div class="progress">
										    <div class="progress-bar" role="progressbar" aria-valuenow="60" 
										        aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
										        <span class="sr-only">40% 完成</span>
										    </div>
										</div>
									</div>
									<div>
										<strong>SpringBoot</strong>
										<div class="progress">
										    <div class="progress-bar" role="progressbar" aria-valuenow="60" 
										        aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
										        <span class="sr-only">40% 完成</span>
										    </div>
										</div>
									</div>
									<div>
										<strong>Docker</strong>
										<div class="progress">
										    <div class="progress-bar" role="progressbar" aria-valuenow="60" 
										        aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
										        <span class="sr-only">40% 完成</span>
										    </div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<hr >
						<div id="education">
							<h2 class="lead title">教育经历</h2>
							<div class="school">
								<img src="img/school-logo4.png" class="pull-left">
								<div>
									<p><strong>浙江广厦建设职业技术大学</strong></p>
									<span class="text-muted">2019 - 2022 | 大数据技术与应用</span>
									<br>
									<br>
									
									<p>学习计算机专业基础知识，并获得国家励志奖学金3次，一等奖学金2次，大连市三好学生。</p>
									<br>
									<p>作为班级团支书，多次组织班级活动。 作为学生会外联部部长，多次联合校外企业赞助学校活动。</p>
								</div>
							</div>
						</div>
						
						<hr>
						<div id="aa">
							<h2 class="lead title">饼图</h2>
							<div id="pie1" style="width: 600px; height: 400px;">
								
							</div>
						</div>
						<script type="text/javascript">
							var myChart = echarts.init(document.getElementById("pie1"));
							var option = {
							        title: {
							          text: "饼图",
							          subtext: "陈有根",
							          left: "center",
							          textStyle: {
							            color: "red",
							            fontStyle: "italic",
							            fontSize: "18",
							          },
							        },
							        series: [
							          {
							            type: "pie",
							            data: [1, 2, 3],
							          },
							        ],
							      };
							     
							myChart.setOption(option);
						</script>
						
						<hr>
						<div id="aa2">
							<h2 class="lead title">柱状</h2>
							<div id="pie2" style="width: 600px; height: 400px;">	
							</div>
						</div>
						<script type="text/javascript">
							var myChart = echarts.init(document.getElementById("pie2"));
							      var option = {
							        title: {
							          text: "",
							        },
							        xAxis: {
							          type: "category",
							          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
							        },
							        yAxis: {
							          type: "value",
							        },
							        series: [
							          {
							            data: [120, 200, 150, 80, 70, 110, 130],
							            type: "bar",
							            showBackground: true,
							            backgroundStyle: {
							              color: "rgba(180, 180, 180, 0.2)",
							            },
							          },
							        ],
							      };
							      myChart.setOption(option);
							myChart.setOption(option);
						</script>
						
						<hr>
						<div id="aa3">
							<h2 class="lead title">雷达图</h2>
							<div id="pie3" style="width: 600px; height: 400px;">	
							</div>
						</div>
						<script type="text/javascript">
							var myChart = echarts.init(document.getElementById("pie3"));
							       var option = {
							              title: {
							                text: "雷达图",
							                subtext: "",
							              },
							              tooltip: {},
							              legend: {
							                data: ["掌握强度（Master the intensity）", "学习情况（Learning situation）"],
							              },
							              radar: {
							                // shape: 'circle',
							                name: {
							                  textStyle: {
							                    color: "#fff",
							                    backgroundColor: "#999",
							                    borderRadius: 3,
							                    padding: [3, 5],
							                  },
							                },
							                indicator: [
							                  { name: "java", max: 6500 },
							                  { name: "MyBatis", max: 16000 },
							                  { name: "Spring", max: 30000 },
							                  { name: "HTML", max: 38000 },
							                  { name: "SpringBoot", max: 52000 },
							                  { name: "Docker", max: 25000 },
							                ],
							              },
							              series: [
							                {
							                  name: "掌握强度 vs 学习情况（Budget vs spending）",
							                  type: "radar",
							                  // areaStyle: {normal: {}},
							                  data: [
							                    {
							                      value: [4300, 10000, 28000, 35000, 50000, 19000],
							                      name: "掌握强度（Allocated Budget）",
							                    },
							                    {
							                      value: [5000, 14000, 28000, 31000, 42000, 21000],
							                      name: "学习情况（Actual Spending）",
							                    },
							                  ],
							                },
							              ],
							            };
							            myChart.setOption(option);
							myChart.setOption(option);
						</script>
						
						<hr>
						<div id="aa2">
							<h2 class="lead title">柱状</h2>
							<div id="pie2" style="width: 600px; height: 400px;">	
							</div>
						</div>
						<script type="text/javascript">
							var myChart = echarts.init(document.getElementById("pie2"));
							      var option = {
							        title: {
							          text: "",
							        },
							        xAxis: {
							          type: "category",
							          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
							        },
							        yAxis: {
							          type: "value",
							        },
							        series: [
							          {
							            data: [120, 200, 150, 80, 70, 110, 130],
							            type: "bar",
							            showBackground: true,
							            backgroundStyle: {
							              color: "rgba(180, 180, 180, 0.2)",
							            },
							          },
							        ],
							      };
							      myChart.setOption(option);
							myChart.setOption(option);
						</script>
						<hr >
						<div id="experience">
							<h2 class="lead title">学习经历</h2>
							<p>
								我从2017年开始接触编程，经过4年的学习，学会了python、win32汇编、c++、java等编程语言。
								做过修改器、辅助、外挂，接触过深度学习做的是ssd目标检测，还做过个人网站。
							</p>
						</div>
						<hr >
						<div id="project">
							<h2 class="lead title">个人作品</h2>
							<div class="row">
								<div class="col-md-5 col-md-offset-1 col-sm-5 col-sm-offset-1 col-xs-6">
									<div class="personal">
										<img src="img/ibms.jpg" class="img-responsive">
										<div class="descript descript01 text-center">
											<div class="center">
												<h2>智能楼宇管理系统</h2>
												<p>基于数据采集模型的智能楼宇管理系统，支持SNMP,Modbus,电总, OPC等协议。</p>
												<div class="details btn btn-info btn-lg">详情</div>
											</div>
										</div>
									</div>
									<div class="personal">
										<img src="img/ai.jpg" class="img-responsive">	
										<div class="descript descript02 text-center">
											<div class="center">
												<h2>股票预测模型</h2>
												<p>基于AI的股票预测模型</p>
											</div>
										</div>
									</div>
								</div>
								<div class="col-md-5 col-sm-5 col-xs-6">
									<div class="personal">
										<img src="./img/prj-02.jpg" class="img-responsive">
										<div class="descript descript03 text-center">
											<div class="center">
												<h2>Jekyll 简历模板</h2>
												<p>基于Jekyll的简历模板，托管在码云。记得给个赞哦！</p>
												<div class="details btn btn-info btn-lg">详情</div>
											</div>
										</div>
									</div>
								</div>
							</div>
							
						</div>
						
					</div>
				</div>
				<!-- 右边的导航栏 -->
				<div class="col-md-1">
					 <div class="nav">
						 <ul class="list-unstyled">
							<li><a href="index.html"><span class="glyphicon glyphicon-user logo"  data-original-title="Home" data-toggle="tooltip" data-placement="left"></span></a></li>
						 	<li><a href="#basic-info"><span class="glyphicon glyphicon-envelope logo"  data-original-title="基本信息" data-toggle="tooltip" data-placement="left"></span></a></li>
							<li><a href="#education"><span class="glyphicon glyphicon-file logo"  data-original-title="职业技能" data-toggle="tooltip" data-placement="left"></span></a></li>
							<li><a href="#profetional"><span class="glyphicon glyphicon-leaf logo"  data-original-title="教育经历" data-toggle="tooltip" data-placement="left"></span></a></li>
						 	<li><a href="#experience"><span class="glyphicon glyphicon-pencil logo"  data-original-title="学习经历" data-toggle="tooltip" data-placement="left"></span></a></li>	
							<li><a href="#project"><span class="glyphicon glyphicon-camera logo"  data-original-title="个人作品" data-toggle="tooltip" data-placement="left"></span></a></li>
							
						 </ul>
					 </div>
				</div>
				<!-- 提示框 -->
				<script type="text/javascript">
					$(function(){
						$('[data-toggle="tooltip"]').tooltip();
					})
				</script>
			</div>
		</div>

	</body>
</html>
